<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<body>
<div class="contentpanel">
    <form:form commandName="formDto" id="form">
        <form:hidden path="caseUuid"/>
        <div class="modal-header">
            <button type="button" class="close"
                    data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                完成案件
            </h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div id="impageUploadWarp"></div>

                <div class="col-sm-11 parentGoodsImage">
                        <%--模板--%>
                    <div style="float:left;position:relative;width:210px;height:210px;border:1px solid #d0d0d0;
                    border-radius:5px;padding:5px;margin-bottom:10px;margin-right:10px;display:none"
                         class="ImageItemTemplate">
                        <input type="hidden" name="" value=""/>
                        <img src="" width="200px" height="200px" style="border-radius:5px;"/>
                        <button class="btn btn-primary btn-xs deleteImage" type="button"
                                style="position:absolute;bottom:3px;right:3px;">
                            <i class="fa fa-trash-o"></i> 删除
                        </button>
                    </div>

                    <c:forEach items="${formDto.imageList}" var="item" varStatus="imageList">
                        <div style="float:left;position:relative;width:210px;height:210px;border:1px solid #d0d0d0;
                            border-radius:5px;padding:5px;margin-bottom:10px;margin-right:10px;display:inline"
                             class="ImageItemTemplate">
                            <form:hidden path="imageList[${imageList.index}].uuid"/>
                            <form:hidden path="imageList[${imageList.index}].url"/>
                            <img src="${item.url}" width="200px" height="200px" style="border-radius:5px;"/>
                            <button class="btn btn-primary btn-xs deleteImage" type="button"
                                    style="position:absolute;bottom:3px;right:3px;">
                                <i class="fa fa-trash-o"></i> 删除
                            </button>
                        </div>
                    </c:forEach>
                    <button class="btn btn-primary uploadImage" type="button"> 上传完成案件图片</button>
                    <br/>
                    <span class="error text-danger ErrorText"></span>

                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="SubmitBtn">
                确定
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
            </button>
        </div>
    </form:form>
</div>
<script type="text/javascript">
    $("#SubmitBtn").click(function () {
        var serialize = $("#form").serialize();
        $.ajax({
            url: 'finish',
            data: serialize,
            type: 'post',
            cache: false,
            success: function (data) {
                if (data.state) {
                    window.location.reload();
                } else {
                    $(".ErrorText").html(data.msg);
                }
            },
            error: function () {
                alert("失败");
            }
        });
    });

    var ue = UE.getEditor('impageUploadWarp');
    ue.ready(function () {
        //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
        ue.hide();
        //侦听图片上传
        ue.addListener('beforeInsertImage', function (t, arg) {
            for (var index in arg) {
                var lastItem = $(".ImageItemTemplate:first");
                var clone = lastItem.clone();
                clone.find("input").each(function () {
                    $(this).attr("name", "imageList[" + ($(".ImageItemTemplate").length - 1) + "].url")
                            .val(arg[index].src);
                });
                clone.find("path").val(arg[index].src);

                clone.find("img").attr("src", arg[index].src);
                clone.css("display", "inline");
                $(".ImageItemTemplate:last").after(clone);
            }
        });
    });

    $(function () {
        $(".contentpanel").on("click", ".uploadImage", function () {
            index = $(".uploadImage").index(this);
            var myImage = ue.getDialog("insertimage");
            myImage.open();
        });
        $(".contentpanel").on("click", ".deleteImage", function () {
            $(this).parents(".ImageItemTemplate").remove();
        });
    });

</script>
</body>
</html>
